import React from 'react';
import style from './style.styl';
import cx from 'classnames';
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'Check';
  }
  onClick = () => {
    if(!this.props.disabled)
      this.props.onChange(!this.props.checked);
  }
  render() {
    const {
      disabled,
      checked,
      onChange,
      label,
    } = this.props;
    return (
      <div className={cx({
        [style['check-box']]: true,
        [style['check-active']]: checked,
        [style['check-disabled']]: disabled,
      })} onClick={this.onClick}>
        <div className={style['check-bg']}></div>
        <div className={style['check-select']}></div>
        <div className={style['check-label']}>{label}</div>
      </div>
    );
  }
}

export default Check;
